<template>
	<view class="container">
		<navigator :url="`/pages/classify/classlist/preview/preview?current=${index}`" class="item" v-for="(item, index) in classlist"
			:key="item._id">
			<image class="image" :src="item.smallPicurl" mode="aspectFill" ></image>
		</navigator>
	</view>
	<custom-loading :status="noMore" />
</template>

<script setup>
import { onUnmounted, reactive } from 'vue';
import { apiGetClassList, apiUserWallList } from '@/service/apis';
	const props = defineProps({
		id: {
			type: String,
		},
		type: {
			type:String,
		},
		name: {
			type: String,
		}
	})
	const pageSize = 12;
	const classlist = ref([]);
	const noMore = ref('loading');
	const getClassify = async () => {
		const res = props.type?
		await apiUserWallList({
			type: props.type,
			pageNum: classlist.value.length/pageSize +1,
			pageSize: pageSize,
		
		})
		:await apiGetClassList({
			classid: props.id,
			pageNum: classlist.value.length/pageSize +1,
			pageSize: pageSize,

		})
		classlist.value = [...classlist.value, ...res]
		uni.setStorageSync('classlist',classlist.value)
		noMore.value = res.length < pageSize ? 'noMore' : 'more'
	}
	
	onMounted(() => {
		getClassify()
		uni.setNavigationBarTitle({
			title: props.name
		})
	})
	onUnmounted(()=>{
		uni.removeStorageSync('classlist')
	})
	onReachBottom(() => {
		if (noMore.value === 'noMore') return;
		getClassify()
	})
	onShareAppMessage({
		
	})
	onShareTimeline({
		
	})
</script>

<style lang="scss" scoped>
	.container {
		display: grid;
		gap: 5px;
		padding: 5px;
		grid-template-columns: repeat(3, 1fr);
		.item {
			height: 400rpx;
			.image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
</style>